/**
 * Created by Dalyn on 2017/2/28.
 */
import React from "react";
import { hashHistory } from 'react-router';
import Confirm from "../../common/Confirm";
import { Carousel } from 'antd';
import "./css/home.css";
import Relay from "react-relay";
import Util from "../../util/Util";
import ServeyMutation from './mutation/ServeyMutation'
import ProgressMutation from './mutation/ProgressMutation'
import OrderDynamicsMutation from './mutation/OrderDynamicsMutation'

/*业务概况*/
class Survey extends React.Component{
    constructor(props){
        super(props)
        this.state = {
          servey: {
            sale: 0, //销售
            buy: 0, //采购
            saleFinishedTotal: 0,    // 已完成的销售订单数量
            saleFinishedSum: 0,    // 已完成的销售订单金额
            saleNotFinishedTotal: 0,   // 未完成的销售订单数量
            saleNotFinishedSum: 0,   // 未完成的销售订单金额
            buyFinsihedTotal: 0,   // 已完成的采购订单数量
            buyNotFinsihedSum: 0,   // 未完成的采购订单金额
            buyNotFinsihedTotal: 0,   // 未完成的采购订单数量
            buyFinsihedSum: 0   // 已完成的采购订单金额
          }
        }
    }

    componentWillMount() {
      this.servey() //业务概况
    }
    servey() {
      Relay.Store.commitUpdate(
          new ServeyMutation({
            enId: sessionStorage.getItem('enterpriseId'),
            permissionId: sessionStorage.getItem('permissionId')
          }),
          {
              onFailure: () => {
                  // console.log("请求失败")
              },
              onSuccess: (response) => {
                let errorCode = response.frontPage.frontPage.errorCode

                if(errorCode == 0) {
                  let value = response.frontPage.frontPage.value
                  let serveyData = response.frontPage.frontPage.trade
                  this.setState({
                    servey: {
                      sale: serveyData.sale, //销售
                      buy: serveyData.buy, //采购
                      saleFinishedTotal: serveyData.saleFinishedTotal,    // 已完成的销售订单数量
                      saleFinishedSum: serveyData.saleFinishedSum,    // 已完成的销售订单金额
                      saleNotFinishedTotal: serveyData.saleNotFinishedTotal,   // 未完成的销售订单数量
                      saleNotFinishedSum: serveyData.saleNotFinishedSum,   // 未完成的销售订单金额
                      buyFinsihedTotal: serveyData.buyFinsihedTotal,   // 已完成的采购订单数量
                      buyNotFinsihedSum: serveyData.buyNotFinsihedSum,   // 未完成的采购订单金额
                      buyNotFinsihedTotal: serveyData.buyNotFinsihedTotal,   // 未完成的采购订单数量
                      buyFinsihedSum: serveyData.buyFinsihedSum   // 已完成的采购订单金额
                    }
                  })
                } else {
                  // alert('业务概况请求失败')
                }
              }
          }
      );
    }

    render(){
        return (
            <div className="home_survey">
                <h3 className="home_sur_t">业务概况</h3>
                  <div className='home_des'>
                    <div className="home_xs">
                      <h3>
                        <p>
                          <i className="home_sur_xs_icon1"></i>
                          <span className="home_sur_span1">{this.state.servey.sale / 100}</span>
                        </p>
                        <p className="home_sur_text">销售金额</p>
                      </h3>
                      <div className="home_sur_line"></div>
                      <ul className="home_sur_ul clear">
                          <li>
                            <p>已完成订单<span>{this.state.servey.saleFinishedTotal}</span>笔</p>
                            <p>￥{this.state.servey.saleFinishedSum}</p>
                          </li>
                          <li>
                            <p>未完成订单<span>{this.state.servey.saleNotFinishedTotal}</span>笔</p>
                            <p>￥{this.state.servey.saleNotFinishedSum / 100}</p>
                          </li>
                      </ul>
                    </div>
                    <div className="home_buy">
                      <h3>
                        <p>
                          <i className="home_sur_xs_icon2"></i>
                          <span className="home_sur_span_cg">{this.state.servey.buy / 100}</span>
                        </p>
                        <p className="home_sur_text">采购金额</p>
                      </h3>
                      <div className="home_sur_line"></div>
                      <ul className="home_sur_ul clear">
                          <li>
                            <p>已完成订单<span>{this.state.servey.buyFinsihedTotal}</span>笔</p>
                            <p>￥{this.state.servey.buyFinsihedSum / 100}</p>
                          </li>
                          <li>
                            <p>未完成订单<span>{this.state.servey.buyNotFinsihedTotal}</span>笔</p>
                            <p>￥{this.state.servey.buyNotFinsihedSum / 100}</p>
                          </li>
                      </ul>
                    </div>
                  </div>
            </div>
        )
    }
}
/*订单动态*/
class Order extends React.Component{
    constructor(props){
        super(props)
        this.state = {
          orderDynamicsData: null,
          pageNum: 1,
          enId: sessionStorage.getItem('enterpriseId'),
          orderLen: '3'
        }
    }
    componentWillMount() {
      this.orderDynamics()
    }

    orderDynamics() {
      Relay.Store.commitUpdate(
          new OrderDynamicsMutation({
            enId: this.state.enId,
            msgType: '0',
            pageSize: '12',
            pageNum: this.state.pageNum
          }),
          {
              onFailure: () => {
                  // console.log("请求失败")
              },
              onSuccess: (response) => {
                let errorCode = response.queryMessageByCompanyIdAndEnId.queryMessageByCompanyIdAndEnId.errorCode
                if (errorCode == 0) {
                  let orderDynamicsData = response.queryMessageByCompanyIdAndEnId.queryMessageByCompanyIdAndEnId.messageAll
                  this.setState({
                    orderDynamicsData: orderDynamicsData,
                    orderLen: orderDynamicsData.length
                  })
                } else {
                  // alert('订单动态请求失败')
                }
              }
          }
      );
    }
    render(){
        return (
            <div className="home_order">
                <h3 className="home_sur_t">订单动态</h3>
                <div className="home_sur_box">
                  <Carousel autoplay vertical={true} infinite={true} dots={true}>
                    {
                      this.state.orderLen >= 3 ? (
                        <div style={{height:190}}>
                          <ul className="home_ord_ul clear">
                            {
                              this.state.orderDynamicsData ? this.state.orderDynamicsData.map((v, i)=> {
                                if (i >= 0 && i < 3 ) {
                                  return (
                                    <li className="home_ord_li">
                                        {
                                          (()=>{
                                            if (i == 0) {
                                              return (<img src={require("./img/12.png")} alt="" />)
                                            } else if (i == 1) {
                                              return (<img src={require("./img/13.png")} alt="" />)
                                            } else if (i == 2) {
                                              return (<img src={require("./img/11.png")} alt="" />)
                                            }
                                          })()
                                        }
                                        <span>{Util.dateFormat_hms(v.msgCreateDate)}</span>
                                        <span className="home_ord_exa">{ v.yiDetail || v.jiaDetail || v.msgDetails }</span>
                                    </li>
                                  )
                                }
                              }) : null
                            }
                          </ul>
                        </div>
                      ) : null
                    }
                    {
                      this.state.orderLen >= 6 ? (
                        <div style={{height:190}}>
                          <ul className="home_ord_ul clear">
                            {
                              this.state.orderDynamicsData ? this.state.orderDynamicsData.map((v, i)=> {
                                if (i >= 3 && i < 6 ) {
                                  return (
                                    <li className="home_ord_li">
                                        {
                                          (()=>{
                                            if (i == 3) {
                                              return (<img src={require("./img/12.png")} alt="" />)
                                            } else if (i == 4) {
                                              return (<img src={require("./img/13.png")} alt="" />)
                                            } else if (i == 5) {
                                              return (<img src={require("./img/11.png")} alt="" />)
                                            }
                                          })()
                                        }
                                        <span>{Util.dateFormat_hms(v.msgCreateDate)}</span>
                                        <span className="home_ord_exa">
                                         { v.yiDetail || v.jiaDetail || v.msgDetails }
                                        </span>
                                    </li>
                                  )
                                }
                              }) : null
                            }
                          </ul>
                        </div>
                      ) : null
                    }
                    {
                      this.state.orderLen >= 9 ? (
                        <div style={{height:190}}>
                          <ul className="home_ord_ul clear">
                            {
                              this.state.orderDynamicsData ? this.state.orderDynamicsData.map((v, i)=> {
                                if (i >= 6 && i < 9 ) {
                                  return (
                                    <li className="home_ord_li">
                                        {
                                          (()=>{
                                            if (i == 6) {
                                              return (<img src={require("./img/12.png")} alt="" />)
                                            } else if (i == 7) {
                                              return (<img src={require("./img/13.png")} alt="" />)
                                            } else if (i == 8) {
                                              return (<img src={require("./img/11.png")} alt="" />)
                                            }
                                          })()
                                        }
                                        <span>{Util.dateFormat_hms(v.msgCreateDate)}</span>
                                        <span className="home_ord_exa">
                                          { v.yiDetail || v.jiaDetail || v.msgDetails }
                                        </span>
                                    </li>
                                  )
                                }
                              }) : null
                            }
                          </ul>
                        </div>
                      ) : null
                    }
                    {
                      this.state.orderLen >= 12 ? (
                        <div style={{height:190}}>
                          <ul className="home_ord_ul clear">
                            {
                              this.state.orderDynamicsData ? this.state.orderDynamicsData.map((v, i)=> {
                                if (i >= 9 && i < 12 ) {
                                  return (
                                    <li className="home_ord_li">
                                        {
                                          (()=>{
                                            if (i == 9) {
                                              return (<img src={require("./img/12.png")} alt="" />)
                                            } else if (i ==10) {
                                              return (<img src={require("./img/13.png")} alt="" />)
                                            } else if (i == 11) {
                                              return (<img src={require("./img/11.png")} alt="" />)
                                            }
                                          })()
                                        }
                                        <span>{Util.dateFormat_hms(v.msgCreateDate)}</span>
                                        <span className="home_ord_exa">
                                         { v.yiDetail || v.jiaDetail || v.msgDetails }
                                        </span>
                                    </li>
                                  )
                                }
                              }) : null
                            }
                          </ul>
                        </div>
                      ) : null
                    }
                  </Carousel>
                </div>
            </div>
        )
    }
}
/*业务进展*/
class Progress extends React.Component{
    constructor(props){
        super(props);
        this.state = {
          pageSize: '12',
          pageNum: 1,
          current: 0,
          enId: sessionStorage.getItem('enterpriseId'),
          progress:{
            type: 0
          }
        }

    }
    componentWillMount() {
      this.progress()
    }
    progress() {
      Relay.Store.commitUpdate(
          new ProgressMutation({
            enId: this.state.enId,
            type: this.state.progress.type,
            pageSize: this.state.pageSize,
            pageNum: this.state.pageNum
          }),
          {
              onFailure: () => {
                  // console.log("请求失败")
              },
              onSuccess: (response) => { 
                let errorCode = response.listOrder.listOrder.errorCode
                if(errorCode == 0) {
                  let progressData = response.listOrder.listOrder.orders
                  this.setState({
                    progress: {
                      progressData: progressData
                    }
                  })
                } else {
                  // console.log('业务进展请求失败')
                }
              }
          }
      );
    }

    orderTypeClick(i) {
      this.setState({
        current: i,
        progress:{
          type: i
        }
      }, () => {
        this.progress()
      })
    }
    // 业务进展订单详情
    homeOrderDetail(oid) {
      hashHistory.push('/orderdetailgms/' + oid)
    }
    render(){
        const arr = ['全部', '销售订单', '采购订单']
        return (
            <div className="clear home_progress">
                <h3  className="home_sur_t">业务进展</h3>
                {/*订单类型*/}
                <div className="home_pro_type">
                    <p className="home_pro_o">
                        <span className="home_pro_span" style={{float:'left', fontSize: '14px', color: '#54657e',  fontFamily: "Microsoft YaHei"}}>订单类型：</span>
                        <ul className="home_pro_o_type">
                          {
                            arr.map((v,i)=> {
                              if (i == this.state.current) {
                                return <li onClick={this.orderTypeClick.bind(this, i)} className="active">{v}</li>
                              } else {
                                return <li onClick={this.orderTypeClick.bind(this, i)}>{v}</li>
                              }
                            })
                          }
                        </ul>
                    </p>
                </div>
                {/*订单金额*/}
                {
                  /*
                   type 1：销售  2：采购
                   partA == enId 相等时为采购 否则为销售
                   status 为 1 时有接单按钮  而且状态为红色  其他状态都是蓝色
                  */
                  this.state.progress.progressData ? this.state.progress.progressData.map((v, i)=>{
                      return (
                        <div key={i+''} className={ v.status == 1 ? 'home_pro_om_green home_active' : 'home_pro_om_green'}>
                          <ul className="home_pro_ul">
                               <li  className="home_pro_li">发布时间：<span className="home_pro_span">{Util.dateFormat_hms(v.createDate)}</span></li>
                               <li  className="home_pro_li">甲&nbsp;&nbsp;方:<span className="home_pro_span">{v.partAName}</span></li>
                               <li  className="home_pro_li">商品类型:
                                 <span className="home_pro_span">&nbsp;
                                   {
                                    (()=>{
                                      switch (v.orderType){
                                        case 0 : return '成衣';
                                        case 1 : return '面料';
                                        case 2 : return '辅料';
                                        case 3 : return '纱线';
                                        case 4 : return '其他';
                                        default : break;
                                      }
                                    })()
                                   }
                                 </span>
                              </li>
                               <li  className="home_pro_li">商品数量: <span className="home_pro_span">{v.orderGoodsNum ? v.orderGoodsNum : 0}</span>件</li>
                          </ul>
                          <div className="home_pro_sale">
                              <p className="home_sur_p">
                                  <i className="home_pro_i"></i>
                                  <span className="home_sur_span2">{v.account / 100}</span>
                              </p>
                              <p className="home_sur_text">订单金额</p>
                          </div>
                          <div className="home_sur_line"></div>
                          <p className="home_pro_p">
                              <span className="home_pro_sr"> {v.message.msgDetails || v.message.yiDetail || v.message.jiaDetail ? '*' : ''}{v.message.msgDetails || v.message.yiDetail || v.message.jiaDetail}</span>
                              <span className='home_pro_sp' onClick={this.homeOrderDetail.bind(this, v.oid)}>详情</span>
                              {
                                <button className="home_pro_sp_btn" onClick={this.homeOrderDetail.bind(this, v.oid)}>接单</button>
                              }
                          </p>
                          <i className={v.partA == this.state.enId ? "home_pro_sup2" : "home_pro_sup1"}></i>
                        </div>
                      )
                  }) : null
                }
            </div>
        )
    }
}
/*导出组件*/
export default class Home extends React.Component{
    render(){
        return (
            <div style={Style.home} className="main_home clear" >
                {/*<Survey/>*/}
                {/*<Order/>*/}
                {/*<Progress/>*/}
            </div>
        )
    }
}
let Style = {
    home:{
        width: '100%',
        // marginTop:"10px",
    }
}
